<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html class="zh-cn zh cn" lang="zh-cn">
<head>
  	<%@ include file="../head.jsp" %>
  	
  	<!-- 1. Add these JavaScript inclusions in the head of your page -->
	<script type="text/javascript" src="/resource/style/xpdd/act/lib/highcharts.js"></script>
	<script type="text/javascript" src="/resource/style/xpdd/act/lib/exporting.js"></script>
	<!--
	 2. Add the JavaScript to initialize the chart on document ready -->
	<script type="text/javascript">
		var chart;
		jQuery(document).ready(function() {
			
			//设置当前路径
			jQuery("#breadcrumb").append('<li><span>:&nbsp;&nbsp;宝贝组分析</span></li>');
			
			var category = ${xNameArr };
			var tmpData = ${inCountArr };
			var title = '${title }';
			
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'container',
					defaultSeriesType: 'column',
					margin: [ 50, 50, 100, 80]
				},
				title: {
					text: title
				},
				xAxis: {
					categories: category,
					labels: {
						rotation: -45,
						align: 'right',
						style: {
							 font: 'normal 13px Verdana, sans-serif'
						}
					}
				},
				yAxis: {
					min: 0,
					title: {
						text: '参与者(人次)'
					}
				},
				legend: {
					enabled: false
				},
				tooltip: {
					formatter: function() {
						return '<b>'+ this.x +'</b><br/>'+
							 '参与人次: '+ Highcharts.numberFormat(this.y, 1) +
							 ' 人次';
					}
				},
		        series: [{
					name: 'Population',
					data: tmpData,//[34, 21, 10, 7, 2],
					dataLabels: {
						enabled: true,
						rotation: -90,
						color: '#FFFFFF',
						align: 'right',
						x: -3,
						y: 10,
						formatter: function() {
							return this.y;
						},
						style: {
							font: 'normal 13px Verdana, sans-serif'
						}
					}			
				}]
			});
		});
	</script>
	<style type="text/css"> 
		.home #family-iphone .product .new-icon { top: 22px; left: 2px;} 
	</style> 
</head>
<body class="vday home">
	<div id="page">
	<%@ include file="../global_navi.jsp" %>
	<%@ include file="../aos_header.jsp" %><!-- 如果需要查询，要自定义aos_header -->
 	<%@ include file="../guide.jsp" %><!-- 动态向导栏，需要后台 --> 
		<div id="primary">
			<div id="primary_main" role="main">
				<div class="box product-shelf">
 					<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
 					<div class="top-corners"></div>
 					<div class="bottom-corners"></div>
 				</div>
 			</div>
 			<div id="secondary" class="rail">
 				<div role="navigation" aria-label="New Items" class="box navigation-list new-to-store">
 					<div class="title-bar">
 						<h2>操作</h2>
 					</div>
 					<div class="box-content clearfix">
 						<div class="list_content">
 							<ul>
 								<li><a href="/analysis" >全局分析</a></li>
 							</ul>
 						</div>
 					</div>
 					<div class="bottom-corners"></div>
 				</div>
 				<div class="module footerblock"></div>
 			</div>
 		</div>
	<%@ include file="../left_navi.jsp" %>
	<%@ include file="../footer.jsp" %>
	</div>
</body>
</html>
